<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title></title>
    <style>
      
      
    </style>
  </head>
  <body>
    <div id="app">
        <form action="">
          <label>账号:</label>
          <input type="text" v-model="userData.username"><br><br>
          <label>密码:</label>
          <input type="password" v-model="userData.password"><br><br>
          <label>性别:</label>&nbsp;
          男<input type="radio" name="sex" value="男" v-model="userData.sex">
          女<input type="radio" name="sex" value="女" v-model="userData.sex">
          <br><br>
          <label>爱好:</label>&nbsp;
          抽烟<input type="checkbox" value="抽烟" v-model="userData.hobbies">
          喝酒<input type="checkbox" value="喝酒" v-model="userData.hobbies">
          烫头<input type="checkbox" value="烫头" v-model="userData.hobbies">
          泡吧<input type="checkbox" value="泡吧" v-model="userData.hobbies">
          KTV<input type="checkbox" value="KTV" v-model="userData.hobbies">
          <br><br>
          <label for="">所属校区</label>
          <select name="" id="" v-model="userData.address">
            <option value="">请选择校区</option>
            <option value="shanghai">上海</option>
            <option value="beijing">北京</option>
            <option value="xia">宁夏</option>
            <option value="liaoning">辽宁</option>
            <option value="sichuan">四川</option>
            <option value="tianjin">天津</option>
          </select>
          <br><br>
          <label for="">其他信息</label>
          <textarea name="" rows="5" v-model="userData.others"></textarea>
          <br><br>
          <input type="checkbox" v-model="userData.protocol"><label for=""> 阅读并接受<a href="">《用户协议》</a></label>
          <br><br>
          <button type="submit" @click.prevent="submit">登录</button>
          <button type="submit" @click.prevent="submit">注册</button>
          <button type="submit" @click.prevent="submit">提交</button>
        </form>

    </div>
    <script src="./js/vue.js"></script>
    <script>
      const vm = new Vue({
        data: {
          //用户数据
          userData:{
            username:"",
            password:"",
            sex:"",
            hobbies:[],
            address:"",
            others:"",
            protocol:false,
          }
          
        },
        methods: {
          submit(){
            console.log(this.userData);
          }
        },
        computed: {},
      });

      vm.$mount("#app");
    </script>
  </body>
</html>
